import '../Todo.css'
// 内置的hook 函数
import { useState } from 'react'
import TodoForm from './TodoForm'
import Todos from './Todos'
function TodoList() {
    // 数据驱动的界面
    // 数据 -> 变化 -> 数据状态 -> 自动刷新页面 -> 数据驱动界面
    // 数组，第一项是数据变量，第二项是修改数据的函数 页面会自动刷新
    // es6 解构
    const [title, setTitle] = useState('Todo list')
    const [todos, setTodos] = useState([
        {
            id: 1,
            text: '吃饭',
            completed: false
        }
    ])
    // setTimeout(() => {
    //     setTodos([
    //         ...todos,
    //         {
    //             id: 2,
    //             text: '睡觉',
    //             completed: false
    //         }
    //     ])
    //     // 找到DOM innerHTML
    //     // 更新业务 setTitle
    //     setTitle('Todo list 2')
    // }, 2000)
    const handleAdd = (text) => {
        // 数组的解构
        // 展开运算符
        // 数组的添加
        setTodos([...todos,
        {
            id: todos.length + 1,
            text,
            completed: false
        }
        ])
    }
    return (
        <div className="container">
            <h1 className="title">{title}</h1>
            {/* 表单 */}
            <TodoForm onAdd={handleAdd}/>
            {/* 列表 */}
            <Todos todos={todos} />
            {/* {
                // 当下这个位置
                // 数据为王 界面是被驱动的
                // 数据绑定 data binding
                // 发生改变后 自动的改变
                todos.map(todo => 
                    <li>{todo.text}</li>
                )
            } */}
        </div>
    )
}

export default TodoList;